<template>
  <el-card shadow="never"
           body-style="padding: 22px;">
    <div class="ele-page-header"
         style="margin-bottom: 20px">
      <div class="ele-page-title">通知模版</div>
      <div class="ele-page-desc"> 用于前端平台相关信息配置。 </div>
    </div>

    <div class="note">
      <el-alert title="注意:"
                style="height: 100px"
                show-icon
                class="ele-alert-border"
                type="warning"
                :closable="false">
        <template #default>
          <div style="font-size: 14px">
            <div style="margin-bottom: 8px">
              请将微信公众平台服务类目选择为：<span style="font-weight: 700">生活服务/家政服务</span>
              未选类目将会导致模版消息不可用。<br />
            </div>
            <div>
              您的微信公众平台目前服务类目为：<span style="font-weight: 700">生活服务/家政服务"</span>
            </div>
          </div>
        </template>
      </el-alert>
    </div>

    <el-form :inline="true"
             class="demo-form-inline">
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { md: 24 } : { span: 24 }">
          <table style="margin-bottom: 30px"
                 class="ele-table ele-table-border ele-table-medium">
            <colgroup>
              <col width="360" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th style="text-align: center">{{ templateMessage.czcgKey }}
                  <span style="color: #1890ff; cursor: pointer"
                        @click="onPreview(host + templateMessage.czcgUrl)">查看</span>
                </th>
                <th style="text-align: center">模板信息（类目：生活服务/家政服务）</th>
              </tr>
            </thead>

            <tr style="height: 80px">
              <td style="text-align: center">模版ID</td>
              <td style="text-align: right">
                <el-form-item :label="templateMessage.czcgKey + 'ID'">
                  <!-- <el-input
                    v-model="templateMessage.czcgValue"
                    :disabled="true"
                    :placeholder="templateMessage.czcgValue"
                  ></el-input> -->
                  <el-select clearable
                             ref="czcgKey"
                             @change="(e) => selectChange(e, 'czcgKey')"
                             class="ele-block"
                             v-model="form.czcgKey"
                             placeholder="请选择模版ID">
                    <el-option v-for="(i, j) in templateMessageList"
                               :key="j"
                               :label="i.title"
                               :idssss="i.id ? i.id : ''"
                               :value="i.template_id">
                      <span style="float: left">{{ i.title }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ i.template_id }}</span></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { md: 24 } : { span: 24 }">
          <table style="margin-bottom: 30px"
                 class="ele-table ele-table-border ele-table-medium">
            <colgroup>
              <col width="360" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th style="text-align: center">{{ templateMessage.ddbqxKey }}
                  <span style="color: #1890ff; cursor: pointer"
                        @click="onPreview(host + templateMessage.ddbqxUrl)">查看</span>
                </th>
                <th style="text-align: center">模板信息（类目：生活服务/家政服务）</th>
              </tr>
            </thead>

            <tr style="height: 80px">
              <td style="text-align: center">模版ID</td>
              <td style="text-align: right">
                <el-form-item :label="templateMessage.ddbqxKey + 'ID'">
                  <!-- <el-input
                    v-model="templateMessage.ddbqxValue"
                    :disabled="true"
                    :placeholder="templateMessage.ddbqxValue"
                  ></el-input> -->
                  <el-select clearable
                             ref="ddbqxKey"
                             @change="(e) => selectChange(e, 'ddbqxKey')"
                             class="ele-block"
                             v-model="form.ddbqxKey"
                             placeholder="请选择模版ID">
                    <el-option v-for="(i, j) in templateMessageList"
                               :key="j"
                               :label="i.title"
                               :idssss="i.id ? i.id : ''"
                               :value="i.template_id">
                      <span style="float: left">{{ i.title }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ i.template_id }}</span></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { md: 24 } : { span: 24 }">
          <table style="margin-bottom: 30px"
                 class="ele-table ele-table-border ele-table-medium">
            <colgroup>
              <col width="360" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th style="text-align: center">{{ templateMessage?.txsqKey }}
                  <span style="color: #1890ff; cursor: pointer"
                        @click="onPreview(host + templateMessage?.txsqUrl)">查看</span>
                </th>
                <th style="text-align: center">模板信息（类目：生活服务/家政服务）</th>
              </tr>
            </thead>

            <tr style="height: 80px">
              <td style="text-align: center">模版ID</td>
              <td style="text-align: right">
                <el-form-item :label="templateMessage.txsqKey + 'ID'">
                  <!-- <el-input
                    v-model="templateMessage.txsqValue"
                    :disabled="true"
                  ></el-input> -->
                  <el-select clearable
                             ref="txsqKey"
                             @change="(e) => selectChange(e, 'txsqKey')"
                             class="ele-block"
                             v-model="form.txsqKey"
                             placeholder="请选择模版ID">
                    <el-option v-for="(i, j) in templateMessageList"
                               :key="j"
                               :idssss="i.id ? i.id : ''"
                               :label="i.title"
                               :value="i.template_id">
                      <span style="float: left">{{ i.title }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ i.template_id }}</span></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { md: 24 } : { span: 24 }">
          <table style="margin-bottom: 30px"
                 class="ele-table ele-table-border ele-table-medium">
            <colgroup>
              <col width="360" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th style="text-align: center">{{ templateMessage.hlfwyjsKey }}
                  <span style="color: #1890ff; cursor: pointer"
                        @click="onPreview(host + templateMessage.hlfwyjsUrl)">查看</span>
                </th>
                <th style="text-align: center">模板信息（类目：生活服务/家政服务）</th>
              </tr>
            </thead>

            <tr style="height: 80px">
              <td style="text-align: center">模版ID</td>
              <td style="text-align: right">
                <el-form-item :label="templateMessage.hlfwyjsKey + 'ID'">
                  <!-- <el-input
                    v-model="templateMessage.hlfwyjsValue"
                    :disabled="true"
                  ></el-input> -->
                  <el-select clearable
                             ref="hlfwyjsKey"
                             @change="(e) => selectChange(e, 'hlfwyjsKey')"
                             class="ele-block"
                             v-model="form.hlfwyjsKey"
                             placeholder="请选择模版ID">
                    <el-option v-for="(i, j) in templateMessageList"
                               :key="j"
                               :idssss="i.id ? i.id : ''"
                               :label="i.title"
                               :value="i.template_id">
                      <span style="float: left">{{ i.title }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ i.template_id }}</span></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { md: 24 } : { span: 24 }">
          <table style="margin-bottom: 30px"
                 class="ele-table ele-table-border ele-table-medium">
            <colgroup>
              <col width="360" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th style="text-align: center">{{ templateMessage.hlfwqrksKey }}
                  <span style="color: #1890ff; cursor: pointer"
                        @click="onPreview(host + templateMessage.hlfwqrksUrl)">查看</span>
                </th>
                <th style="text-align: center">模板信息（类目：生活服务/家政服务）</th>
              </tr>
            </thead>

            <tr style="height: 80px">
              <td style="text-align: center">模版ID</td>
              <td style="text-align: right">
                <el-form-item :label="templateMessage.hlfwqrksKey + 'ID'">
                  <!-- <el-input
                    v-model="templateMessage.hlfwyjsValue"
                    :disabled="true"
                    :placeholder="templateMessage.hlfwyjsValue"
                  ></el-input> -->
                  <el-select clearable
                             ref="hlfwqrksKey"
                             @change="(e) => selectChange(e, 'hlfwqrksKey')"
                             class="ele-block"
                             v-model="form.hlfwqrksKey"
                             placeholder="请选择模版ID">
                    <el-option v-for="(i, j) in templateMessageList"
                               :key="j"
                               :idssss="i.id ? i.id : ''"
                               :label="i.title"
                               :value="i.template_id">
                      <span style="float: left">{{ i.title }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ i.template_id }}</span></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { md: 24 } : { span: 24 }">
          <table style="margin-bottom: 30px"
                 class="ele-table ele-table-border ele-table-medium">
            <colgroup>
              <col width="360" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th style="text-align: center">{{ templateMessage.xdtzKey }}
                  <span style="color: #1890ff; cursor: pointer"
                        @click="onPreview(host + templateMessage.xdtzUrl)">查看</span>
                </th>
                <th style="text-align: center">模板信息（类目：生活服务/家政服务）</th>
              </tr>
            </thead>

            <tr style="height: 80px">
              <td style="text-align: center">模版ID</td>
              <td style="text-align: right">
                <el-form-item :label="templateMessage.xdtzKey + 'ID'">
                  <!-- <el-input
                    v-model="templateMessage.xdtzValue"
                    :disabled="true"
                    :placeholder="templateMessage.xdtzValue"
                  ></el-input> -->
                  <el-select clearable
                             ref="xdtzKey"
                             @change="(e) => selectChange(e, 'xdtzKey')"
                             class="ele-block"
                             v-model="form.xdtzKey"
                             placeholder="请选择模版ID">
                    <el-option v-for="(i, j) in templateMessageList"
                               :key="j"
                               :idssss="i.id ? i.id : ''"
                               :label="i.title"
                               :value="i.template_id">
                      <span style="float: left">{{ i.title }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ i.template_id }}</span></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { md: 24 } : { span: 24 }">
          <table style="margin-bottom: 30px"
                 class="ele-table ele-table-border ele-table-medium">
            <colgroup>
              <col width="360" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th style="text-align: center">{{ templateMessage.jdcgKey }}
                  <span style="color: #1890ff; cursor: pointer"
                        @click="onPreview(host + templateMessage.jdcgUrl)">查看</span>
                </th>
                <th style="text-align: center">模板信息（类目：生活服务/家政服务）</th>
              </tr>
            </thead>

            <tr style="height: 80px">
              <td style="text-align: center">模版ID</td>
              <td style="text-align: right">
                <el-form-item :label="templateMessage.jdcgKey + 'ID'">
                  <!-- <el-input
                    v-model="templateMessage.jdcgValue"
                    :disabled="true"
                    :placeholder="templateMessage.jdcgValue"
                  ></el-input> -->

                  <el-select clearable
                             ref="jdcgKey"
                             @change="(e) => selectChange(e, 'jdcgKey')"
                             class="ele-block"
                             v-model="form.jdcgKey"
                             placeholder="请选择模版ID">
                    <el-option v-for="(i, j) in templateMessageList"
                               :key="j"
                               :idssss="i.id ? i.id : ''"
                               :label="i.title"
                               :value="i.template_id">
                      <span style="float: left">{{ i.title }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ i.template_id }}</span></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { md: 24 } : { span: 24 }">
          <table style="margin-bottom: 30px"
                 class="ele-table ele-table-border ele-table-medium">
            <colgroup>
              <col width="360" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th style="text-align: center">{{ templateMessage.ddwcKey }}
                  <span style="color: #1890ff; cursor: pointer"
                        @click="onPreview(host + templateMessage.ddwcUrl)">查看</span>
                </th>
                <th style="text-align: center">模板信息（类目：生活服务/家政服务）</th>
              </tr>
            </thead>

            <tr style="height: 80px">
              <td style="text-align: center">模版ID</td>
              <td style="text-align: right">
                <el-form-item :label="templateMessage.ddwcKey + 'ID'">
                  <!-- <el-input
                    v-model="templateMessage.ddwcValue"
                    :disabled="true"
                    :placeholder="templateMessage.ddwcValue"
                  ></el-input> -->

                  <el-select clearable
                             ref="ddwcValue"
                             @change="(e) => selectChange(e, 'ddwcValue')"
                             class="ele-block"
                             v-model="form.ddwcValue"
                             placeholder="请选择模版ID">
                    <el-option v-for="(i, j) in templateMessageList"
                               :key="j"
                               :idssss="i.id ? i.id : ''"
                               :label="i.title"
                               :value="i.template_id">
                      <span style="float: left">{{ i.title }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ i.template_id }}</span></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { md: 24 } : { span: 24 }">
          <table style="margin-bottom: 30px"
                 class="ele-table ele-table-border ele-table-medium">
            <colgroup>
              <col width="360" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th style="text-align: center">{{ templateMessage.yexfcgKey }}
                  <span style="color: #1890ff; cursor: pointer"
                        @click="onPreview(host + templateMessage.yexfcgUrl)">查看</span>
                </th>
                <th style="text-align: center">模板信息（类目：生活服务/家政服务）</th>
              </tr>
            </thead>

            <tr style="height: 80px">
              <td style="text-align: center">模版ID</td>
              <td style="text-align: right">
                <el-form-item label="余额消费成功通知ID">
                  <!-- <el-input
                    v-model="templateMessage.yexfcgValue"
                    :disabled="true"
                    :placeholder="templateMessage.yexfcgValue"
                  ></el-input> -->
                  <el-select clearable
                             ref="yexfcgValue"
                             @change="(e) => selectChange(e, 'yexfcgValue')"
                             class="ele-block"
                             v-model="form.yexfcgValue"
                             placeholder="请选择模版ID">
                    <el-option v-for="(i, j) in templateMessageList"
                               :key="j"
                               :label="i.title"
                               :idssss="i.id ? i.id : ''"
                               :value="i.template_id">
                      <span style="float: left">{{ i.title }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ i.template_id }}</span></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { md: 24 } : { span: 24 }">
          <table style="margin-bottom: 30px"
                 class="ele-table ele-table-border ele-table-medium">
            <colgroup>
              <col width="360" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th style="text-align: center">{{ templateMessage?.txsbKey }}
                  <span style="color: #1890ff; cursor: pointer"
                        @click="onPreview(host + templateMessage.txsbUrl)">查看</span>
                </th>
                <th style="text-align: center">模板信息（类目：生活服务/家政服务）</th>
              </tr>
            </thead>

            <tr style="height: 80px">
              <td style="text-align: center">模版ID</td>
              <td style="text-align: right">
                <el-form-item :label="templateMessage?.txsbKey + 'ID'">
                  <!-- <el-input
                    v-model="templateMessage.txsbValue"
                    :disabled="true"
                    :placeholder="templateMessage.txsbValue"
                  ></el-input> -->
                  <el-select clearable
                             ref="txsbKey"
                             @change="(e) => selectChange(e, 'txsbKey')"
                             class="ele-block"
                             v-model="form.txsbKey"
                             placeholder="请选择模版ID">
                    <el-option v-for="(i, j) in templateMessageList"
                               :key="j"
                               :label="i.title"
                               :idssss="i.id ? i.id : ''"
                               :value="i.template_id">
                      <span style="float: left">{{ i.title }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ i.template_id }}</span></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { md: 24 } : { span: 24 }">
          <table style="margin-bottom: 30px"
                 class="ele-table ele-table-border ele-table-medium">
            <colgroup>
              <col width="360" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th style="text-align: center">{{ templateMessage.txcgKey }}
                  <span style="color: #1890ff; cursor: pointer"
                        @click="onPreview(host + templateMessage.txcgUrl)">查看</span>
                </th>
                <th style="text-align: center">模板信息（类目：生活服务/家政服务）</th>
              </tr>
            </thead>

            <tr style="height: 80px">
              <td style="text-align: center">模版ID</td>
              <td style="text-align: right">
                <el-form-item :label="templateMessage.txcgKey + 'ID'">
                  <!-- <el-input
                    v-model="templateMessage.txcgValue"
                    :disabled="true"
                    :placeholder="templateMessage.txcgValue"
                  ></el-input> -->
                  <el-select clearable
                             ref="txcgKey"
                             @change="(e) => selectChange(e, 'txcgKey')"
                             class="ele-block"
                             v-model="form.txcgKey"
                             placeholder="请选择模版ID">
                    <el-option v-for="(i, j) in templateMessageList"
                               :key="j"
                               :label="i.title"
                               :idssss="i.id ? i.id : ''"
                               :value="i.template_id">
                      <span style="float: left">{{ i.title }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ i.template_id }}</span></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { md: 24 } : { span: 24 }">
          <table style="margin-bottom: 30px"
                 class="ele-table ele-table-border ele-table-medium">
            <colgroup>
              <col width="360" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th style="text-align: center">{{ templateMessage.ddfwryybgKey }}
                  <span style="color: #1890ff; cursor: pointer"
                        @click="onPreview(host + templateMessage.ddfwryybgUrl)">查看</span>
                </th>
                <th style="text-align: center">模板信息（类目：生活服务/家政服务）</th>
              </tr>
            </thead>

            <tr style="height: 80px">
              <td style="text-align: center">模版ID</td>
              <td style="text-align: right">
                <el-form-item :label="templateMessage.ddfwryybgKey + 'ID'">
                  <!-- <el-input
                    v-model="templateMessage.ddfwryybgValue"
                    :disabled="true"
                    :placeholder="templateMessage.ddfwryybgValue"
                  ></el-input> -->

                  <el-select clearable
                             class="ele-block"
                             ref="ddfwryybgKey"
                             @change="(e) => selectChange(e, 'ddfwryybgKey')"
                             v-model="form.ddfwryybgKey"
                             placeholder="请选择模版ID">
                    <el-option v-for="(i, j) in templateMessageList"
                               :key="j"
                               :label="i.title"
                               :idssss="i.id ? i.id : ''"
                               :value="i.template_id">
                      <span style="float: left">{{ i.title }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ i.template_id }}</span></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { md: 24 } : { span: 24 }">
          <table style="margin-bottom: 30px"
                 class="ele-table ele-table-border ele-table-medium">
            <colgroup>
              <col width="360" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th style="text-align: center">{{ templateMessage.fwryycfKey }}
                  <span style="color: #1890ff; cursor: pointer"
                        @click="onPreview(host + templateMessage.fwryycfUrl)">查看</span>
                </th>

                <th style="text-align: center">模板信息（类目：生活服务/家政服务）</th>
              </tr>
            </thead>

            <tr style="height: 80px">
              <td style="text-align: center">模版ID</td>
              <td style="text-align: right">
                <el-form-item :label="templateMessage.fwryycfKey + 'ID'">
                  <!-- <el-input
                    v-model="templateMessage.fwryycfValue"
                    :disabled="true"
                    :placeholder="templateMessage.fwryycfValue"
                  ></el-input> -->
                  <el-select clearable
                             ref="fwryycfKey"
                             @change="(e) => selectChange(e, 'fwryycfKey')"
                             class="ele-block"
                             v-model="form.fwryycfKey"
                             placeholder="请选择模版ID">
                    <el-option v-for="(i, j) in templateMessageList"
                               :key="j"
                               :label="i.title"
                               :idssss="i.id ? i.id : ''"
                               :value="i.template_id">
                      <span style="float: left">{{ i.title }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ i.template_id }}</span></el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
    </el-form>
    <div class="ele-bottom-tool">
      <div class="ele-bottom-tool-actions">
        <el-button type="primary"
                   :loading="loading"
                   @click="submit">
          提交
        </el-button>
      </div>
    </div>
    <!-- 图片预览 -->
    <el-image-viewer v-if="showViewer"
                     style="z-index: 9999"
                     :on-close="closeViewer"
                     :url-list="imgViewArr" />
  </el-card>
</template>

<script>
import moment from 'moment';
import {
  notificationTemplate,
  notificationTemplateIdList,
  notificationTempBatchSave,
  notificationTemplateGet,
  notificationTemplateModify
} from '@/api/notificationTemplate/index';
import VueDraggable from 'vuedraggable';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
export default {
  components: { ElImageViewer },
  data () {
    return {
      notificationGetList: [],
      imgViewArr: [],
      showViewer: false,
      taskList: [],
      result: '',
      visible: false,
      input: '',
      outputArray: [],
      templateMessage: null,
      host: window.location.origin,
      templateMessageList: [],
      form: {
        czcgKey: '',
        ddbqxKey: '',
        txsqKey: '',
        hlfwyjsKey: '',
        hlfwqrksKey: '',
        xdtzKey: '',
        jdcgKey: '',
        ddwcValue: '',
        yexfcgValue: '',
        txsbKey: '',
        txcgKey: '',
        ddfwryybgKey: '',
        fwryycfKey: '',
        sumbit: '',

      },

      ids: [],

      czcgKeyArr: [],
      ddbqxKeyArr: [],
      txsqKeyArr: [],
      hlfwyjsKeyArr: [],
      hlfwqrksKeyArr: [],
      xdtzKeyArr: [],
      jdcgKeyArr: [],
      ddwcValueArr: [],
      yexfcgValueArr: [],
      txsbKeyArr: [],
      txcgKeyArr: [],
      ddfwryybgKeyArr: [],
      fwryycfKeyArr: [],
      sumbitArr: [],
      loading: false,
      isupdata: false
    };
  },
  mounted () {
    this.init();
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {
    async init () {
      const res = await notificationTemplate();
      console.log(res);
      //  微信公众号模版消息
      const result = await notificationTemplateIdList(
        this.$store.state.site.info.id
      );
      //数据库模版消息
      const notificationGet = await notificationTemplateGet();
      //   console.log(result);
      console.log(notificationGet);
      this.notificationGetList = notificationGet
      this.templateMessage = res;

      //   const result = {}
      //   result.templateList = [

      //     {
      //       "title": "充值成功通知",
      //       "content": "充值金额:{{amount3.DATA}}\n充值时间:{{time2.DATA}}\n充值方式:{{phrase11.DATA}}\n充后余额:{{amount13.DATA}}\n",
      //       "example": "充值金额:99.8\n充值时间:2022年11月22日 22:22:22\n充值方式:微信支付\n充后余额:403\n",
      //       "template_id": "uCMCKqzWkgAOs8ry4aKs25DCyTE24PsXLa1pC-QH2bA"
      //     },
      //     {
      //       "title": "订单被取消通知",
      //       "content": "订单编号:{{character_string12.DATA}}\n服务项目:{{thing17.DATA}}\n退单原因:{{phrase13.DATA}}\n退单时间:{{time14.DATA}}\n订单状态:{{short_thing6.DATA}}\n",
      //       "example": "订单编号:2023032411331804090\n服务项目:空调维修\n退单原因:暂时不想要\n退单时间:2022-12-11 15:16:00\n订单状态:已取消\n",
      //       "template_id": "h9bUQR1Yw_ZTwjTcb0a3-zx-kBxdgLGgIhSq9CqjiUY"
      //     },
      //     {
      //       "title": "服务人员已出发提醒",
      //       "content": "订单号:{{character_string1.DATA}}\n预约项目:{{thing2.DATA}}\n服务人员:{{thing3.DATA}}\n出发时间:{{time4.DATA}}\n",
      //       "example": "订单号:O651465165316\n预约项目:厨具清洁\n服务人员:张三、李四\n出发时间:9月19日 19︰00\n",
      //       "template_id": "_KMvr9v5wu65TLwJGBj_NBBCiyeZviTL1iKlggjrmVY"
      //     },
      //     {
      //       "title": "提现成功通知",
      //       "content": "发起时间:{{time7.DATA}}\n提现金额:{{amount5.DATA}}\n提现费率:{{short_thing6.DATA}}\n到账金额:{{amount2.DATA}}\n到账时间:{{time3.DATA}}\n",
      //       "example": "发起时间:2023-02-03 15:30:12\n提现金额:1499.60\n提现费率:0.6%\n到账金额:100\n到账时间:2023-02-03 15:30:12\n",
      //       "template_id": "CMRx3SGGPb9ddCWxTpWjRv1W8fDxfaqtpo8Mb62A8cQ"
      //     },
      //     {
      //       "title": "提现失败通知",
      //       "content": "发起时间:{{time1.DATA}}\n提现金额:{{amount2.DATA}}\n失败原因:{{const3.DATA}}\n",
      //       "example": "发起时间:{{time7.DATA}}\n提现金额:{{amount5.DATA}}\n失败原因:不符合平台规范\n",
      //       "template_id": "FFwEwA6CFAWBCB4jFeS4TvYLmTpUwD5ozrNZUBR9jk0"
      //     },
      //     {
      //       "title": "余额消费成功通知",
      //       "content": "当前余额:{{amount3.DATA}}\n本次消费余额:{{amount2.DATA}}\n",
      //       "example": "当前余额:200\n本次消费余额:99.9\n",
      //       "template_id": "xxCnEiPiyZM3R_TklYAYVoIShMfJwq_zzsAGHQd9Pm8"
      //     },
      //     {
      //       "title": "订单完成通知",
      //       "content": "订单号:{{character_string1.DATA}}\n服务产品:{{thing3.DATA}}\n负责师傅:{{thing16.DATA}}\n完成时间:{{time4.DATA}}\n",
      //       "example": "订单号:1664242809701535744\n服务产品:全天陪护（全护理）\n负责师傅:李四\n完成时间:2023-08-21\n",
      //       "template_id": "BCLJNnMiCcX613AMP1R4yjGkrZ4FTeUN_2BSNU30LW4"
      //     },
      //     {
      //       "title": "接单成功提醒",
      //       "content": "服务单号:{{character_string10.DATA}}\n订单项目:{{thing8.DATA}}\n技师姓名:{{phrase11.DATA}}\n预约时间:{{time16.DATA}}\n客户地址:{{thing5.DATA}}\n",
      //       "example": "服务单号:DSF8232342382\n订单项目:床单*1、地毯*1、风衣*1等\n技师姓名:张三\n预约时间:2023-05-21 20:00:00\n客户地址:某小区某门牌号\n",
      //       "template_id": "Hxtt0dO75mXzKcvz96sJpy-YEDleTly5B7buhddGuio"
      //     },
      //     {
      //       "title": "下单成功通知",
      //       "content": "订单编号:{{character_string14.DATA}}\n服务项目:{{thing1.DATA}}\n订单金额:{{amount17.DATA}}\n预约时间:{{time4.DATA}}\n服务地址:{{thing5.DATA}}\n",
      //       "example": "订单编号:WX10000\n服务项目:中央空调深度保养大礼包\n订单金额:200元\n预约时间:2023-05-28 9:00~12:00\n服务地址:某小区某门牌号\n",
      //       "template_id": "r0ZMIqN_sEqboTAZgA24MNeK_nRZtKH_5rD2aZlQCAw"
      //     },
      //     {
      //       "title": "护理服务确认开始通知",
      //       "content": "订单编号:{{character_string9.DATA}}\n护理套餐:{{thing2.DATA}}\n护理开始:{{time3.DATA}}\n",
      //       "example": "订单编号:1664242809701535744\n护理套餐:一级护理-本自理\n护理开始:2022年11月17日 9:00\n",
      //       "template_id": "4zIUhjKiB-x0_OzjLjqMWJC7CRfApN6QRwY54n1DsWg"
      //     },
      //     {
      //       "title": "护理服务已结束通知",
      //       "content": "护理套餐:{{thing2.DATA}}\n订单状态:{{short_thing6.DATA}}\n结束时间:{{time3.DATA}}\n",
      //       "example": "护理套餐:一级护理-半自理\n订单状态:已结束\n结束时间:2022年11月17日 9:00\n",
      //       "template_id": "EAYQGKRE_6HnHnxwOWOtj6NKUQe7q_fPbHpfZx86-BY"
      //     },
      //     {
      //       "title": "提现申请通知",
      //       "content": "提现账号:{{character_string3.DATA}}\n提现金额:{{amount2.DATA}}\n姓名:{{thing1.DATA}}\n申请时间:{{time4.DATA}}\n",
      //       "example": "提现账号:62252221551255645\n提现金额:99.99元\n姓名:张三\n申请时间:2022-05-30 12:30\n",
      //       "template_id": "efiAs4LhNIhuJSJv9Sb1EchkkaGyJbQ7c_LgRVfxPbE"
      //     },
      //     {
      //       "title": "订单服务人员已变更通知",
      //       "content": "订单号:{{character_string1.DATA}}\n服务产品:{{thing3.DATA}}\n转单人:{{thing5.DATA}}\n服务时间:{{time6.DATA}}\n服务地址:{{thing7.DATA}}\n",
      //       "example": "订单号:1664242809701535744\n服务产品:全天陪护（全护理）\n转单人:张某某\n服务时间:2023-10-26 15:30\n服务地址:XX小区XX单元XXXX室\n",
      //       "template_id": "o5ynrC2OGSJJ1USK2MWDxfG184-ArTNPF17McG9qknM"
      //     }
      //   ]
      if (result.templateList) {
        this.templateMessageList = result.templateList;
        if (notificationGet.length) {
          this.isupdata = true;



          //   是修改
          notificationGet.forEach((item, index) => {
            if (index == 0) {

              //   const res = notificationGet.find((item) => {
              //     console.log(item.templateName + '===')
              //     return item.templateName == '充值成功通知'
              //   })
              const res = notificationGet[0]
              console.log(res)
              const templateId = res?.templateId
              if (templateId) {


                const resData = this.templateMessageList.filter((item) => {

                  return item.template_id == templateId;
                });
                console.log(resData + "========")
                this.form.czcgKey = resData[0]?.template_id;
                this.czcgKeyArr = [{
                  templateId: resData[0]?.template_id,
                  templateName: '充值成功通知',
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  id: res.id
                }]

                // this.czcgKeyArr = res
              }

              //   const idIndex = this.ids.findIndex((item) => {
              //     return item == item.id;
              //   });
              //   if (idIndex == -1) {
              //     this.ids.push(item.id);
              //   }
            } else if (index == 1) {
              //   const res = notificationGet.find((item) => {
              //     return item.templateName == '订单被取消通知'
              //   })
              //   console.log(res.templateId)
              const res = notificationGet[1]
              const templateId = res.templateId
              console.log(JSON.stringify(res) + "========")
              if (templateId) {
                const resData = this.templateMessageList.filter((item) => {
                  return item.template_id == templateId;
                });
                this.form.ddbqxKey = resData[0]?.template_id;
                this.ddbqxKeyArr = [{
                  templateId: resData[0]?.template_id,
                  templateName: '订单被取消通知',
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  id: res.id
                }];
              }

              //   const idIndex = this.ids.findIndex((item) => {
              //     return item == item.id;
              //   });
              //   if (idIndex == -1) {
              //     this.ids.push(item.id);
              //   }
            } else if (index == 2) {
              //   const res = notificationGet.find((item) => {
              //     return item.templateName == '提现申请通知'
              //   })
              //   console.log(res.templateId)
              const res = notificationGet[2]
              const templateId = res.templateId
              if (templateId) {
                const resData = this.templateMessageList.filter((item) => {
                  return item.template_id == templateId;
                });
                this.form.txsqKey = resData[0]?.template_id;
                this.txsqKeyArr = [{
                  templateId: resData[0]?.template_id,
                  templateName: '提现申请通知',
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  id: res.id
                }];
              }

              //   const idIndex = this.ids.findIndex((item) => {
              //     return item == item.id;
              //   });
              //   if (idIndex == -1) {
              //     this.ids.push(item.id);
              //   }
            } else if (index == 3) {
              //   const res = notificationGet.find((item) => {
              //     return item.templateName == '护理服务已结束通知'
              //   })
              const res = notificationGet[3]
              const templateId = res.templateId
              if (templateId) {
                const resData = this.templateMessageList.filter((item) => {
                  return (
                    item.template_id == templateId
                  );
                });
                this.form.hlfwyjsKey = resData[0]?.template_id;
                this.hlfwyjsKeyArr = [{
                  templateId: resData[0]?.template_id,
                  templateName: '护理服务已结束通知',
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  id: res.id
                }];
              }

              //   const idIndex = this.ids.findIndex((item) => {
              //     return item == item.id;
              //   });
              //   if (idIndex == -1) {
              //     this.ids.push(item.id);
              //   }  
            } else if (index == 4) {
              //   const res = notificationGet.find((item) => {
              //     return item.templateName == '护理服务确认开始通知'
              //   })
              //   console.log(res.templateId)
              const res = notificationGet[4]
              const templateId = res.templateId
              if (templateId) {
                const resData = this.templateMessageList.filter((item) => {
                  return (
                    item.template_id == templateId
                  );
                });
                this.form.hlfwqrksKey = resData[0]?.template_id;
                this.hlfwqrksKeyArr = [{
                  templateId: resData[0]?.template_id,
                  templateName: '护理服务确认开始通知',
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  id: res.id
                }];
              }

              //   const idIndex = this.ids.findIndex((item) => {
              //     return item == item.id;
              //   });
              //   if (idIndex == -1) {
              //     this.ids.push(item.id);
              //   }
            } else if (index == 5) {
              //   const res = notificationGet.find((item) => {
              //     return item.templateName == '下单成功通知'
              //   })
              //   console.log(res.templateId)
              const res = notificationGet[5]
              const templateId = res.templateId
              if (templateId) {
                const resData = this.templateMessageList.filter((item) => {
                  return item.template_id == templateId;
                });
                this.form.xdtzKey = resData[0]?.template_id;

                this.xdtzKeyArr = [{
                  templateId: resData[0]?.template_id,
                  templateName: '下单成功通知',
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  id: res.id
                }];
              }

              //   const idIndex = this.ids.findIndex((item) => {
              //     return item == item.id;
              //   });
              //   if (idIndex == -1) {
              //     this.ids.push(item.id);
              //   }
            } else if (index == 6) {

              //   const res = notificationGet.find((item) => {
              //     return item.templateName == '接单成功提醒'
              //   })
              //   console.log(res.templateId)
              const res = notificationGet[6]
              const templateId = res.templateId
              if (templateId) {
                const resData = this.templateMessageList.filter((item) => {
                  return item.template_id == templateId;
                });
                this.form.jdcgKey = resData[0]?.template_id;
                this.jdcgKeyArr = [{
                  templateId: resData[0]?.template_id,
                  templateName: '接单成功提醒',
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  id: res.id
                }];
              }
              //   const idIndex = this.ids.findIndex((item) => {
              //     return item == item.id;
              //   });
              //   if (idIndex == -1) {
              //     this.ids.push(item.id);
              //   }
            } else if (index == 7) {
              //   const res = notificationGet.find((item) => {
              //     return item.templateName == '订单完成通知'
              //   })
              //   console.log(res.templateId)
              const res = notificationGet[7]
              const templateId = res.templateId
              if (templateId) {
                const resData = this.templateMessageList.filter((item) => {
                  return item.template_id == templateId;
                });
                this.form.ddwcValue = resData[0]?.template_id;
                this.ddwcValueArr = [{
                  templateId: resData[0]?.template_id,
                  templateName: '订单完成通知',
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  id: res.id
                }];
              }

              //   const idIndex = this.ids.findIndex((item) => {
              //     return item == item.id;
              //   });
              //   if (idIndex == -1) {
              //     this.ids.push(item.id);
              //   }
            } else if (index == 8) {
              //   const res = notificationGet.find((item) => {
              //     return item.templateName == '余额消费成功通知'
              //   })
              const res = notificationGet[8]
              console.log(res.templateId)
              const templateId = res.templateId
              if (templateId) {
                const resData = this.templateMessageList.filter((item) => {
                  return (
                    item.template_id == templateId
                  );
                });
                this.form.yexfcgValue = resData[0]?.template_id;
                this.yexfcgValueArr = [{
                  templateId: resData[0]?.template_id,
                  templateName: '余额消费成功通知',
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  id: res.id
                }];
              }

              //   const idIndex = this.ids.findIndex((item) => {
              //     return item == item.id;
              //   });
              //   if (idIndex == -1) {
              //     this.ids.push(item.id);  
              //   }
            } else if (index == 9) {
              //   const res = notificationGet.find((item) => {
              //     return item.templateName == '提现失败通知'
              //   })
              //   console.log(res.templateId)
              const res = notificationGet[9]
              console.log(res.templateId)
              const templateId = res.templateId
              if (templateId) {
                const resData = this.templateMessageList.filter((item) => {
                  return item.template_id == templateId;
                });
                this.form.txsbKey = resData[0]?.template_id;
                this.txsbKeyArr = [{
                  templateId: resData[0]?.template_id,
                  templateName: '提现失败通知',
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  id: res.id
                }];
              }
              //   const idIndex = this.ids.findIndex((item) => {
              //     return item == item.id;
              //   });
              //   if (idIndex == -1) {
              //     this.ids.push(item.id);
              //   }
            } else if (index == 10) {

              const res = notificationGet[10]
              const templateId = res.templateId
              if (templateId) {
                const resData = this.templateMessageList.filter((item) => {
                  return item.template_id == templateId;
                });
                this.form.txcgKey = resData[0]?.template_id;
                this.txcgKeyArr = [{
                  templateId: resData[0]?.template_id,
                  templateName: '提现成功通知',
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  id: res.id
                }];
              }

              //   const idIndex = this.ids.findIndex((item) => {
              //     return item == item.id;
              //   });
              //   if (idIndex == -1) {
              //     this.ids.push(item.id);
              //   }
            } else if (index == 11) {
              //   const res = notificationGet.find((item) => {
              //     return item.templateName == '订单服务人员已变更通知'
              //   })
              //   console.log(res.templateId)
              const res = notificationGet[11]
              const templateId = res.templateId
              if (templateId) {
                const resData = this.templateMessageList.filter((item) => {
                  return (
                    item.template_id == templateId
                  );
                });
                this.form.ddfwryybgKey = resData[0]?.template_id;
                this.ddfwryybgKeyArr = [{
                  templateId: resData[0]?.template_id,
                  templateName: '订单服务人员已变更通知',
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  id: res.id
                }];
              }

              //   const idIndex = this.ids.findIndex((item) => {
              //     return item == item.id;
              //   });
              //   if (idIndex == -1) {
              //     this.ids.push(item.id);
              //   }
            } else if (index == 12) {
              //   const res = notificationGet.find((item) => {
              //     return item.templateName == '服务人员已出发提醒'
              //   })
              const res = notificationGet[12]
              console.log(res.templateId)
              const templateId = res.templateId
              if (templateId) {
                const resData = this.templateMessageList.filter((item) => {
                  return (
                    item.template_id == templateId
                  );
                });
                this.form.fwryycfKey = resData[0]?.template_id;
                this.fwryycfKeyArr = [{
                  templateId: resData[0]?.template_id,
                  templateName: '服务人员已出发提醒',
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  id: res.id
                }];
              }

              //   const idIndex = this.ids.findIndex((item) => {
              //     return item == item.id;
              //   });
              //   if (idIndex == -1) {
              //     this.ids.push(item.id);
              //   }
            }


          });

          //   const res = notificationGet.map((item) => {
          //     return {
          //       title: item.templateName,
          //       template_id: item.templateId,
          //       id: item.id
          //     };
          //   });

          //   this.templateMessageList = res;
          //   console.log(this.templateMessageList);
          this.templateMessageList = result.templateList;

          this.templateMessageList.forEach((item, index) => {

            //  console.log()   
            this.notificationGetList.forEach((i, indexs) => {
              if (item.title == i.templateName) {
                this.templateMessageList[index].id = i.id
              }
            })


          })

        } else {
          this.isupdata = false;
        }
      }


    },
    async submit () {
      this.sumbitArr = [
        ...this.czcgKeyArr,
        ...this.ddbqxKeyArr,
        ...this.txsqKeyArr,
        ...this.hlfwyjsKeyArr,
        ...this.hlfwqrksKeyArr,
        ...this.xdtzKeyArr,
        ...this.jdcgKeyArr,
        ...this.ddwcValueArr,
        ...this.yexfcgValueArr,
        ...this.txsbKeyArr,
        ...this.txcgKeyArr,
        ...this.ddfwryybgKeyArr,
        ...this.fwryycfKeyArr
      ];

      console.log(this.sumbitArr);
      console.log(this.ids);

      if (this.isupdata) {
        var data = {
          ids: this.ids,
          data: this.sumbitArr
        };
        console.log(this.sumbitArr)
        const res = await notificationTemplateModify(this.sumbitArr);
        this.$message.success('操作成功');
        this.init();

      } else {
        console.log(this.sumbitArr)
        // console.log(this.hasDuplicate(this.sumbitArr))


        if (this.sumbitArr.length == 13) {


          if (this.hasDuplicate(this.sumbitArr)) {
            this.$message.error('模版选择的相同请重新选择');
          } else {
            const res = await notificationTempBatchSave(this.sumbitArr);
            console.log(res);
            this.$message.success(res);
            this.init();
            // console.log('提交成功')
          }

        } else {
          this.$message.error('请选择所以对应的模板后在提交');
          return;
        }

      }
    },
    hasDuplicate (data) {
      let templateIds = new Set();
      for (let item of data) {
        if (templateIds.has(item.templateId)) {
          return true;
        } else {
          templateIds.add(item.templateId);
        }
      }
      return false;
    },
    selectChange (e, value) {
      console.log(e, value);
      if (e) {
        if (this.isupdata) {

          this.$nextTick(() => {
            if (value == 'czcgKey') {
              //   const res = this.notificationGetList.find((item) => {
              //     console.log(item.templateName + '===')
              //     return item.templateName == '充值成功通知'
              //   })
              const res = this.notificationGetList[0]

              console.log(res)
              this.czcgKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  //   id: this.$refs[value].selected.$attrs?.idssss
                  id: res.id
                }
              ];

              console.log(this.czcgKeyArr)
            } else if (value == 'ddbqxKey') {
              // 订单取消
              const res = this.notificationGetList[1]
              this.ddbqxKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  //   id: this.$refs[value].selected.$attrs?.idssss
                  id: res.id
                }
              ];
              console.log(this.ddbqxKeyArr)
              // const idIndex = this.ids.findIndex((item) => {
              //   return item == this.$refs[value].selected.$attrs?.idssss;
              // });

              // if (idIndex == -1) {
              //   this.ids.push(this.$refs[value].selected.$attrs?.idssss);
              // }
            } else if (value == 'txsqKey') {
              const res = this.notificationGetList[2]
              this.txsqKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  //   id: this.$refs[value].selected.$attrs?.idssss
                  id: res.id

                }
              ];

              // const idIndex = this.ids.findIndex((item) => {
              //   return item == this.$refs[value].selected.$attrs?.idssss;
              // });

              // if (idIndex == -1) {
              //   return this.ids.push(
              //     this.$refs[value].selected.$attrs?.idssss
              //   );
              // }
            }
            else if (value == 'hlfwyjsKey') {
              const res = this.notificationGetList[3]
              this.hlfwyjsKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  //   id: this.$refs[value].selected.$attrs?.idssss
                  id: res.id
                }
              ];

              // const idIndex = this.ids.findIndex((item) => {
              //   return item == this.$refs[value].selected.$attrs?.idssss;
              // });

              // if (idIndex == -1) {
              //   this.ids.push(this.$refs[value].selected.$attrs?.idssss);
              // }
            } else if (value == 'hlfwqrksKey') {
              const res = this.notificationGetList[4]
              this.hlfwqrksKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  //   id: this.$refs[value].selected.$attrs?.idssss
                  id: res.id
                }
              ];

              // const idIndex = this.ids.findIndex((item) => {
              //   return item == this.$refs[value].selected.$attrs?.idssss;
              // });

              // if (idIndex == -1) {
              //   this.ids.push(this.$refs[value].selected.$attrs?.idssss);
              // }
            } else if (value == 'xdtzKey') {
              const res = this.notificationGetList[5]
              this.xdtzKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  //   id: this.$refs[value].selected.$attrs?.idssss
                  id: res.id
                }
              ];

              // const idIndex = this.ids.findIndex((item) => {
              //   return item == this.$refs[value].selected.$attrs?.idssss;
              // });

              // if (idIndex == -1) {
              //   this.ids.push(this.$refs[value].selected.$attrs?.idssss);
              // }
            } else if (value == 'jdcgKey') {
              const res = this.notificationGetList[6]
              this.jdcgKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  //   id: this.$refs[value].selected.$attrs?.idssss
                  id: res.id
                }
              ];

              // const idIndex = this.ids.findIndex((item) => {
              //   return item == this.$refs[value].selected.$attrs?.idssss;
              // });

              // if (idIndex == -1) {
              //   this.ids.push(this.$refs[value].selected.$attrs?.idssss);
              // }
            } else if (value == 'ddwcValue') {
              const res = this.notificationGetList[7]
              this.ddwcValueArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  //   id: this.$refs[value].selected.$attrs?.idssss
                  id: res.id
                }
              ];

              // const idIndex = this.ids.findIndex((item) => {
              //   return item == this.$refs[value].selected.$attrs?.idssss;
              // });

              // if (idIndex == -1) {
              //   this.ids.push(this.$refs[value].selected.$attrs?.idssss);
              // }
            } else if (value == 'yexfcgValue') {
              const res = this.notificationGetList[8]
              this.yexfcgValueArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  //   id: this.$refs[value].selected.$attrs?.idssss
                  id: res.id
                }
              ];

              // const idIndex = this.ids.findIndex((item) => {
              //   return item == this.$refs[value].selected.$attrs?.idssss;
              // });

              // if (idIndex == -1) {
              //   this.ids.push(this.$refs[value].selected.$attrs?.idssss);
              // }
            } else if (value == 'txsbKey') {
              const res = this.notificationGetList[9]
              this.txsbKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  //   id: this.$refs[value].selected.$attrs?.idssss
                  id: res.id
                }
              ];

              // const idIndex = this.ids.findIndex((item) => {
              //   return item == this.$refs[value].selected.$attrs?.idssss;
              // });

              // if (idIndex == -1) {
              //   this.ids.push(this.$refs[value].selected.$attrs?.idssss);
              // }
            } else if (value == 'ddfwryybgKey') {
              const res = this.notificationGetList[11]
              this.ddfwryybgKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  //   id: this.$refs[value].selected.$attrs?.idssss
                  id: res.id
                }
              ];

              // const idIndex = this.ids.findIndex((item) => {
              //   return item == this.$refs[value].selected.$attrs?.idssss;
              // });

              // if (idIndex == -1) {
              //   this.ids.push(this.$refs[value].selected.$attrs?.idssss);
              // }
            } else if (value == 'fwryycfKey') {
              const res = this.notificationGetList[12]
              this.fwryycfKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  //   id: this.$refs[value].selected.$attrs?.idssss
                  id: res.id
                }
              ];

              // const idIndex = this.ids.findIndex((item) => {
              //   return item == this.$refs[value].selected.$attrs?.idssss;
              // });

              // if (idIndex == -1) {
              //   this.ids.push(this.$refs[value].selected.$attrs?.idssss);
              // }
            } else if (value == 'txcgKey') {
              const res = this.notificationGetList[10]
              console.log(this.notificationGetList)
              this.txcgKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  updataeDate: moment().format('YYYY-MM-DDTHH:mm:ss'),
                  //   id: this.$refs[value].selected.$attrs?.idssss
                  id: res.id
                }
              ];
              // const idIndex = this.ids.findIndex((item) => {
              //   return item == this.$refs[value].selected.$attrs?.idssss;
              // });

              // if (idIndex == -1) {
              //   this.ids.push(this.$refs[value].selected.$attrs?.idssss);
              // }
            }
          });
        } else {
          this.$nextTick(() => {
            if (value == 'czcgKey') {
              this.czcgKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  createDate: moment().format('YYYY-MM-DDTHH:mm:ss')
                }
              ];
              localStorage.setItem(
                'czcgKeyId',
                this.$refs[value].selected.value
              );
            } else if (value == 'ddbqxKey') {
              this.ddbqxKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  createDate: moment().format('YYYY-MM-DDTHH:mm:ss')
                }
              ];
              localStorage.setItem(
                'ddbqxKeyId',
                this.$refs[value].selected.value
              );
            } else if (value == 'txsqKey') {
              this.txsqKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  createDate: moment().format('YYYY-MM-DDTHH:mm:ss')
                }
              ];
              localStorage.setItem(
                'txsqKeyId',
                this.$refs[value].selected.value
              );
            } else if (value == 'hlfwyjsKey') {
              this.hlfwyjsKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  createDate: moment().format('YYYY-MM-DDTHH:mm:ss')
                }
              ];
              localStorage.setItem(
                'dhlfwyjsKeyId',
                this.$refs[value].selected.value
              );
            } else if (value == 'hlfwqrksKey') {
              this.hlfwqrksKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  createDate: moment().format('YYYY-MM-DDTHH:mm:ss')
                }
              ];
              localStorage.setItem(
                'hlfwqrksKeyId',
                this.$refs[value].selected.value
              );
            } else if (value == 'xdtzKey') {
              this.xdtzKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  createDate: moment().format('YYYY-MM-DDTHH:mm:ss')
                }
              ];
              localStorage.setItem(
                'xdtzKeyId',
                this.$refs[value].selected.value
              );
            } else if (value == 'jdcgKey') {
              this.jdcgKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  createDate: moment().format('YYYY-MM-DDTHH:mm:ss')
                }
              ];
              localStorage.setItem(
                'jdcgKeyId',
                this.$refs[value].selected.value
              );
            } else if (value == 'ddwcValue') {
              this.ddwcValueArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  createDate: moment().format('YYYY-MM-DDTHH:mm:ss')
                }
              ];
              localStorage.setItem(
                'ddwcValueId',
                this.$refs[value].selected.value
              );
            } else if (value == 'yexfcgValue') {
              this.yexfcgValueArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  createDate: moment().format('YYYY-MM-DDTHH:mm:ss')
                }
              ];
              localStorage.setItem(
                'dyexfcgValueId',
                this.$refs[value].selected.value
              );
            } else if (value == 'txsbKey') {
              this.txsbKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  createDate: moment().format('YYYY-MM-DDTHH:mm:ss')
                }
              ];
              localStorage.setItem(
                'txsbKeyId',
                this.$refs[value].selected.value
              );
            } else if (value == 'ddfwryybgKey') {
              this.ddfwryybgKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  createDate: moment().format('YYYY-MM-DDTHH:mm:ss')
                }
              ];
              localStorage.setItem(
                'ddfwryybgKeyId',
                this.$refs[value].selected.value
              );
            } else if (value == 'fwryycfKey') {
              this.fwryycfKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  createDate: moment().format('YYYY-MM-DDTHH:mm:ss')
                }
              ];
              localStorage.setItem(
                'fwryycfKeyId',
                this.$refs[value].selected.value
              );
            } else if (value == 'txcgKey') {
              this.txcgKeyArr = [
                {
                  templateId: this.$refs[value].selected.value,
                  templateName: this.$refs[value].selected.label,
                  templateCategory: '家政服务',
                  siteId: this.$store.state.site.info.id,
                  createDate: moment().format('YYYY-MM-DDTHH:mm:ss')
                }
              ];
              localStorage.setItem(
                'txcgKeyId',
                this.$refs[value].selected.value
              );
            }
          });

          console.log(this.sumbitArr);
          this.sumbitArr.push({
            templateid: e
          });
        }
      }
    },
    /* 更新数据 */
    updateModelValue (value, index) {
      //this.taskList[index] = value;
      this.$set(this.taskList, index, value);
    },
    /* 查看数据 */
    viewData () {
      this.result = JSON.stringify(this.taskList, null, 4);
      this.visible = true;
    },
    // 点击按钮预览图片
    onPreview (imgStr) {
      if (imgStr.length) {
        if (imgStr.includes(',')) {
          console.log('字符串中包含逗号');
          // 包含的进行slice(',') 分割

          this.imgViewArr = imgStr.split(',').map((item) => item.trim());
        } else {
          console.log('字符串中不包含逗号');
          this.imgViewArr = imgStr.split();
        }

        this.showViewer = true;
      } else {
        this.$message({
          message: '没有上传图片无法进行预览',
          type: 'warning'
        });
      }
    },
    // 关闭查看器
    closeViewer () {
      this.showViewer = false;
    }
  },
  created () {
    // 处理数据
    const temp = [];
    for (let i = 0; i < 18; i++) {
      const index = parseInt(String(i / 6));
      if (temp[index] == null) {
        temp[index] = [];
      }
      temp[index].push({
        id: i,
        taskName: '测试任务' + (i + 1),
        status: 0
      });
    }
    this.taskList = temp;
  }
};
</script>

<style lang="less" scoped>
/deep/.ele-bottom-tool-actions {
  text-align: center;
}
.note {
  margin-bottom: 20px;
}
/deep/ .el-input--medium {
  width: 600px;
}
/deep/ .el-select {
}
/deep/ .el-form-item {
  margin-bottom: 0;
}
/* 表格行拖拽按下去样式 */
.ele-table tr.sortable-chosen {
  background: hsla(0, 0%, 60%, 0.1);
}
</style>
